<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页专题列表</title>
</head>
<link rel="stylesheet" href="../../static/layeropen.css">
<link rel="stylesheet" href="../../static/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../../static/layui_ext/dtree/font/dtreefont.css">
<script src="../../static/global.js"></script>
<script src="../../static/layui_ext/dtree/dtree.js"></script>
<body>

<!-- 查询专题-->
<div style="margin-top: 20px">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">专题名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="home_subject_name" id="home_subject_name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" id="home_subject_souso" lay-submit="" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<!--新增专题页面-->
<div id="home_subject_add_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="home_subject_add_form" lay-filter="home_subject_add_form">
        <div class="layui-form-item">
            <label class="layui-form-label">专题名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入专题名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题副标题</label>
            <div class="layui-input-inline">
                <input type="text" name="sub_title" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" id="" name="status" lay-skin="switch"
                       lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详情连接</label>
            <div class="layui-input-inline">
                <input type="text" name="url" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题图片地址</label>
            <div class="layui-input-inline">
                <input type="text" name="img" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="home_subject_add" lay-filter="home_subject_add">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!--  专题信息修改页面-->
<div id="home_subject_up_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="scoke_up_form" lay-filter="home_subject_up_form">
        <div class="layui-form-item">
            <label class="layui-form-label">专题名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入专题名称" class="layui-input">
                <input type="text"  name="id" class="layui-input layui-hide">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题副标题</label>
            <div class="layui-input-inline">
                <input type="text" name="sub_title" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" id="" name="status" lay-skin="switch"
                       lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详情连接</label>
            <div class="layui-input-inline">
                <input type="text" name="url" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题图片地址</label>
            <div class="layui-input-inline">
                <input type="text" name="img" lay-verify="required" placeholder="请输入专题地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="button" class="layui-btn" lay-submit="" id="home_subject_up" lay-filter="home_subject_up">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!-- 关联专题商品的显示所有多条件查询--------------------------------------------------->
<div style="display: none" id="sms_home_subject_div">
    <form style="margin-top: 20px" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">专题商品名字</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="sms_home_subject_name" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="sms_home_subject_spuSusuo" lay-filter="couponSusuo">
                        搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
    <!-- 关联商品专题的表格渲染-->
    <table id="sms_home_subject_spu_demo" lay-filter="sms_home_subject_spu_test"></table>
</div>
<!-- 关联商品专题的侧边栏修改删除操作-->
<script type="text/html" id="sms_home_subject_spu_barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="sms_home_subject_spu_edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="sms_home_subject_spu_del">删除</a>
</script>
<!-- 关联商品专题头部的增加多删操作-->
<script type="text/html" id="coupon_category_toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
<!-- 关联商品专题的新增-->
<div style="display:none" id="sms_home_subject_spu_add_div">
    <form class="layui-form" id="sms_home_subject_spu_add_form" lay-filter="sms_home_subject_spu_add_form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">专题ID</label>
            <div class="layui-input-inline">
                <input type="text" name="subject_id" id="subject_id_add" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题商品</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入专题商品名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">SPUID</label>
            <div class="layui-input-inline">
                <input type="text" name="spu_id" lay-verify="required" placeholder="请输入SPUID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit id="sms_home_subject_spu_btn_add" lay-filter="sms_home_subject_spu_btn_add">
                    立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 关联商品专题的修改-->
<div style="display:none" id="sms_home_subject_up_div">
    <form class="layui-form" id="sms_home_subject_spu_up_form" lay-filter="sms_home_subject_spu_up_form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">专题ID</label>
            <div class="layui-input-inline">
                <input type="text" name="subject_id" id="subject_id_add" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题商品</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入专题商品名称" class="layui-input">
                <input type="text"  name="id" class="layui-input layui-hide">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">SPUID</label>
            <div class="layui-input-inline">
                <input type="text" name="spu_id" lay-verify="required" placeholder="请输入SPUID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit id="sms_home_subject_spu_btn_up" lay-filter="sms_home_subject_spu_btn_up">
                    立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
    </div>
</script>
<!--表格渲染-->
<table class="layui-hide" id="demo" lay-filter="test"></table>

<!--侧边栏操作-->
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs" id="guanlian" lay-event="guanlian">关联分类</button>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="name" id="switch_show_status" value="{{d.id}}" lay-skin="switch"
           lay-text="ON|OFF" lay-filter="switch_show_status" {{ d.status== 1 ? 'checked' : '' }}>
</script>

<script>
    layui.use(['form','table','layer','laydate'],function (){
        let form = layui.form;
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.$;
        let laydate = layui.laydate;

        //专题列表多条件显示所有
        table.render({
            elem:'#demo',
            url:glodate.serverZuul + 'home_subject/find_Admin_All_Home_Subject', //数据接口
            toolbar:'#toolbarDemo', //开启头部工具栏
            page:true,//开启分页
            cols:[[
                {type:'checkbox',fixed:'left'},
                {field: 'name', title: '专题名称'},
                {field: 'title', title: '专题标题'},
                {field: 'sub_title', title: '专题副标题'},
                {field: 'status', title: '显示状态', templet: '#switchTpl', unresize: true},
                {field: 'url', title: '详情连接'},
                {field: 'sort', title: '排序'},
                {field: 'img', title: '专题图片地址'},
                {fixed: 'right', align: 'center', toolbar: '#barDemo'}
            ]],id:'tableID'
        })

        //模糊查询专题列表
        $("#home_subject_souso").on('click', function () {
            active.reload();
            return false;
        });

        //搜索专题列表
        active = {
            reload: function () {
                table.reload('tableID', {
                    where: {
                        'name': $("#home_subject_name").val()
                    }, page: {
                        curr: 1
                    }
                })
            }
        }


        //删除专题
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus("tableID");  //获取复选框的信息
            let data = checkStatus.data; //获取选中的数据

            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        skin: 'demo-class',
                        area: ['500px', '500px'],
                        anim: 5,
                        content: $('#home_subject_add_div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                    return false;
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        let home_subject_ids = [];
                        for (let i = 0; i < data.length; i++) {
                            home_subject_ids.push(data[i].id);
                        }
                        let ids = home_subject_ids.join(",");
                        console.log(ids);
                        layer.confirm("真的要删除这【" + data.length + "】个吗？", function () {
                            $.ajax({
                                url: glodate.serverZuul + "home_subject/delete_Admin_Home_Subject",
                                method: "delete",
                                data: {"id": ids},
                                success: function (res) {
                                    console.log(res);
                                    if (res.code == 200) {
                                        layer.msg("删除成功！");
                                    } else {
                                        layer.alert(res.msg)
                                    }
                                    active.reload();
                                }
                            })
                        });
                    }
                    break;
            };
        });



        //添加专题信息
        form.on('submit(home_subject_add)', function (data) {
            let url = glodate.serverZuul + "home_subject/insert_Admin_Home_Subject";
            let brandadd =form.val('home_subject_add_form');  //获取表单内的所有的值
            brandadd.status = brandadd.status != null ? 1 : 0;
            console.log(brandadd);
            $.ajax({
                url:url,
                method:"post",
                dataType:"json",
                data: brandadd,
                success:function (res) {
                    if (res.code == 200) {
                        layer.msg("添加成功！", {icon: 6});//2秒关闭（如果不配置，默认是3秒）
                        formIdreset('#home_subject_add_form');
                    } else {
                        layer.msg(res.msg, {icon: 5});//2秒关闭（如果不配置，默认是3秒）
                    }
                }
            })
            active.reload();  //重载页面表格
            layer.closeAll();
            return false;  //防止表单重复提交
        });

        //修改专题信息
        form.on('submit(home_subject_up)', function () {
            let datas =form.val('home_subject_up_form');  //获取表单内的所有的值
            datas.status = datas.status != null ? 1 : 0;  //判断我们是否开启了图片的显示按钮
            console.log(datas)
            $.ajax({
                url: glodate.serverZuul + "home_subject/update_Admin_Home_Subject",
                method: "put",
                data: datas,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {
                            icon: 6
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 6
                        });
                    }
                }
            })
            active.reload();  //重载页面表格
            layer.closeAll();
            return false;  //防止表单重复提交

        })


        //修改状态按钮
        form.on('switch(switch_show_status)', function (obj) {
            let checked = obj.elem.checked;
            let status = checked == true ? 1 : 0;
            console.log(status);
            let data = {'status': status, 'id': this.value}
            console.log(data)
            $.ajax({
                url: glodate.serverZuul + "home_subject/update_Admin_Home_Subject",
                type:"put",
                data: data,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.tips("修改成功", obj.othis, {time: 1000});
                    } else {
                        layer.msg(res.msg,obj.othis, {time: 1000});
                    }
                }
            })
            return false;
        });





        //专题商品的侧边栏监听事件  点击按钮打开关联分类的div
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let dataceshi = data;
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'guanlian') {
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    area: ['700px', '500px'],
                    anim: 5,
                    fixed: false,
                    content: $("#sms_home_subject_div"), //这里content是一个普通的String
                    btn: ['关闭'],
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                });

                //专题商品分类的显示所有
                table.render({
                    elem: '#sms_home_subject_spu_demo'
                    , url: glodate.serverZuul + 'home_subject_spu/find_Admin_Sms_Home_Subject_Spu' //数据接口
                    , page: true //开启分页
                    , where: {
                        'subject_id': data.id
                    }
                    , toolbar: '#coupon_category_toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , cols: [[ //表头
                          {type: 'checkbox', fixed: 'left'}
                        , {type: 'numbers', title: '序号', fixed: 'left'}
                        , {field: 'name', title: '专题名称'}
                        , {field: 'spu_id', title: 'SPUID'}
                        , {fixed: 'right', width: 165, align: 'center', toolbar: '#sms_home_subject_spu_barDemo'}
                    ]], id: 'sms_home_subject_spu_tableId'
                });
                //专题商品分类的搜索
                $("#sms_home_subject_spuSusuo").on('click', function () {
                    sms_home_subject_spu_active.reload();
                    return false;
                })

                sms_home_subject_spu_active = {
                    reload: function () {
                        table.reload('sms_home_subject_spu_tableId', {
                            where: { //设定异步数据接口的额外参数，任意设
                                'name': $("#sms_home_subject_name").val()
                            }
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }); //只重载数据
                    }
                }

                let sms_home_subject_spu_add_open;
                //专题商品关联关系头部工具栏事件
                table.on('toolbar(sms_home_subject_spu_test)', function (obj) {
                    let checkStatus = table.checkStatus("sms_home_subject_spu_tableId");//监听table表格事件点击
                    let data = checkStatus.data;
                    switch (obj.event) {
                        case 'add':
                            $("#subject_id_add").val(dataceshi.id);
                            sms_home_subject_spu_add_open = layer.open({
                                type: 1,
                                skin: 'demo-class',
                                area: ['500px', '400px'],
                                anim: 5,
                                fixed: false,
                                content: $("#sms_home_subject_spu_add_div"), //这里content是一个普通的String
                                btn: ['关闭'],
                                yes: function (index, layero) {
                                    // 重置清空
                                    layer.close(index);
                                }
                            });
                            return false;
                            break;
                        case 'delete':  //专题商品分类的多删
                            if (data.length == 0) {
                                layer.msg('请选者数据');
                            } else {
                                let sms_home_subject_spu_id = [];
                                for (let i = 0; i < data.length; i++) {
                                    sms_home_subject_spu_id.push(data[i].id);
                                }
                                let ids = sms_home_subject_spu_id.join(",");
                                console.log(ids);
                                layer.confirm("确认删除这[" + data.length + "]条数据吗？", function () {
                                    $.ajax({
                                        url: glodate.serverZuul + "home_subject_spu/delete_Sms_Home_Subject_Spu",
                                        method: "delete",
                                        data: {"id": ids},
                                        success: function (res) {
                                            console.log(res);
                                            if (res.code == 200) {
                                                layer.msg("删除成功！", {icon: 6});
                                            } else {
                                                layer.alert(res.msg, {icon: 5})
                                            }
                                        }
                                    })
                                    sms_home_subject_spu_active.reload();
                                });

                            }
                            break;
                    }
                    ;
                });

                //关联商品的新增
                form.on('submit(sms_home_subject_spu_btn_add)', function () {
                    let datas = form.val('sms_home_subject_spu_add_form');
                    datas.subject_id = data.id;
                    //$("#subject_id_add").val(data.id);
                    console.log(data);
                    $.ajax({
                        url: glodate.serverZuul + "home_subject_spu/insert_Sms_Home_Subject_Spu",
                        type: "post",
                        data: datas,
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg("添加成功", {icon: 6});
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                            sms_home_subject_spu_active.reload();
                        }
                    })
                    formIdreset("#sms_home_subject_spu_add_form");//重置表单的初始内容
                    layer.close(sms_home_subject_spu_add_open);
                    return false;
                })


                //删除专题商品
                table.on('tool(sms_home_subject_spu_test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    let data = obj.data; //获得当前行数据
                    let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                    if (layEvent === 'sms_home_subject_spu_del') { //删除
                        layer.confirm('您确认删除[' + data.name + ']吗?', function (index) {
                            $.ajax({
                                url: glodate.serverZuul + "home_subject_spu/delete_Sms_Home_Subject_Spu",
                                type: "delete",
                                data: {"id": data.id},
                                dataType: "json",
                                success: function (res) {
                                    console.log(res)
                                    if (res.code == 200) {
                                        layer.msg("删除成功", {icon: 6});
                                    } else {
                                        layer.msg(res.msg, {icon: 5});
                                    }
                                    sms_home_subject_spu_active.reload();
                                }
                            })
                        });
                    } else if (layEvent === 'sms_home_subject_spu_edit') { //编辑
                        form.val('sms_home_subject_spu_up_form',data)
                        layer.open({
                            type: 1,
                            skin: 'demo-class',
                            area: ['500px', '300px'],
                            anim: 5,
                            fixed: false,
                            content: $("#sms_home_subject_up_div"), //这里content是一个普通的String
                            btn: ['关闭'],
                            yes: function (index, layero) {
                                layer.close(index);
                            }
                        });
                        return false;
                    }
                });

                //专题商品分类的修改操作
                form.on('submit(sms_home_subject_spu_btn_up)',function () {
                    let datas = form.val('sms_home_subject_spu_up_form');
                    $.ajax({
                        url:glodate.serverZuul+"home_subject_spu/update_Sms_Home_Subject_Spu",
                        type:"put",
                        data:datas,
                        dataType:"json",
                        success:function (res) {
                            console.log(res)
                            if(res.code == 200){
                                layer.msg("修改成功",{icon:6})
                            }else{
                                layer.msg(res.msg,{icon:5});
                            }
                            sms_home_subject_spu_active.reload();
                        }
                    })
                    return false;
                })
            }else if (layEvent === 'del') { //删除
                layer.confirm('真的删除【' + data.name + '】吗?', function (index) {
                    $.ajax({
                        url: glodate.serverZuul + "home_subject/delete_Admin_Home_Subject",
                        method: "delete",
                        data: {"id": data.id},
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg("删除成功！", {
                                    icon: 6
                                });
                            } else {
                                layer.alert(res.msg, {
                                    icon: 5
                                });
                            }
                            active.reload();
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                form.val('home_subject_up_form', data);
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: '修改',
                    area: ['500px', '500px'],
                    anim: 5,
                    content: $('#home_subject_up_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                return false;
            }

        });



        //提取的清楚表單的方法  formId form表头的id值
        function formIdreset(formId) {
            // 重置清空
            $(formId)[0].reset();
            form.render();//必须写
        }

    });
</script>

</body>
</html>